LinHuijuan's Blog

页面布局

# 页面布局

[TOC]

# 一、双飞翼布局

左右定宽，中间自适应

# 1.1 浮动

<div class="wrap">
    <!-- 先写不占行的浮动元素，再写占行的middle -->
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>
1
2
3
4
5
6
.wrap{width: 80%;}
.left{float: left;}
.right{float: right;}
1
2
3

在实际布局中，中间的宽度也包括左右浮动的部分（被盖住了），不过文本流不会被浮动元素覆盖（文档流才会），故可不考虑给中间部分加margin值。

  • 当中间高度撑开的时候：
    • 左右不会自适应撑开
    • 撑开的文本内容会环绕浮动元素

# 1.2 绝对定位

.wrap {
    width: 80%;
    position: relative;
}
.left {
    position: absolute;
    left: 0;
}
.right {
    position: absolute;
    right: 0;
}
.middle {
    position: absolute;
    left: 200px;
    right: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

绝对定位会使元素脱离文档流。 （position的值为absolute、fixed的元素脱离文档流，static、relative不脱离文档流。）

  • 当中间高度撑开的时候：
    • 左右不会自适应撑开
    • 中间部分高度会随文本内容一同撑开

# 1.3 flexbox

<div class="wrap">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
1
2
3
4
5
.wrap {
    width: 80%;
    display: flex;
}
.middle {
    flex: 1;
}
1
2
3
4
5
6
7
  • 当中间高度撑开的时候：
    • 左右会自适应撑开

# 1.4 table

// table会作为块级表格显示
.wrap {display: table;}
// table-cell会作为表格单元格显示（类似<td>和<tr>)
div {display: table-cell;}
.left {width: 200px;}
.right {width: 200px;}
1
2
3
4
5
6
  • 当中间高度撑开的时候：
    • 左右会自适应撑开

# 1.5 grid

.wrap {
    width: 80%;
    display: grid;
    grid-template-rows: 500px;
    grid-template-columns: 200px auto 200px;
}
1
2
3
4
5
6
  • 当中间高度撑开的时候：
    • 左右不会自适应撑开
    • 中间高度不会随超出的文本一同撑开

ps:待补充 上高度固定，下适应； 下高度固定，上适应。

# 6. 五种方法对比

  1. 浮动
    • 优点：兼容性好。
    • 缺点：脱离文档流，需要清除浮动。
  2. 绝对定位
    • 同浮动。
  3. flex
    • 移动端基本用flex布局。
  4. table
    • 兼容性好。IE8不支持flex，此时可用table。
  5. grid
    • 代码简化。

# 二、1,2,3宽度相等

总宽度是页面的90%，1,2,3宽度相等。

<!DOCTYPE html>
<head> 
    <meta charset="utf-8"> 
    <title>aaa</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 90%;
            display: flex;
            justify-content: center;
            margin: auto;
            
        }
        .container div{
            height: 90px;
            flex: 1;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

伪元素